/*
 This file is a part of the NsCDE - Not so Common Desktop Environment
 */

/* 6. widgets on top of menu widget CSS part */
/* generic bg color in cde is beige, but in dialogs everyting is green (for default palette Broica.dp, the menu color)) */
/* So I define all styles with and without string 'messagedialog' prepended and in process.py generate two */
/* groups from that, one without string, one with 'dialog' prepended, where colors ..._gen are repalced by ..._menu */
/* also set > * to green menu color. hmm how to do this betterly? */
/* furthermore, 1px is replaced by borderwidth for all bevels (default 1px). Maybe use this later for scaling */
/* QUICK RECAP: */
/* margin is space around the object, padding is space inside the object */

/* __allopts */
*
{
	-GtkTreeView-expander-size: 11;
}

/* __window */
window
{
	background-color: @bg_menu;
	color: @fg_menu;
}

/* count this as a 'popup dialog' so all green 'menu' color (in default color palette) */
/* __popover */
popover
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 2px;
	padding: 2px;
	padding: 2px 4px 2px 4px;
}

/* __messagedialog */
/* messagedialog background etc? no effect whatsoever */
dialog > *,
popover > *,
messagedialog > *
{
	background-color: @bg_menu;
	color: @fg_menu;
}

/* the actual 'dialog' widget apparently sits inside a 'non=dialog' widget, so even if I style everyting */
/* that is dialog to green, it still gets a beige border. so cant set dialogs to green this way */
/* So.. put all .backgrounds to green.... */
/* __background */
.background 
{
	background-color: @bg_menu;
	color: @fg_menu;
}

/* and then put the not(dialog) backgrounds back to beige again MUAHHAHAHAHA */
/* omg this actually works hahahaha */
/* but better would be to set green the stupid border but how? */
menu *:not(popover):not(dialog).background
{
	background-color: @bg_menu;
	color: @fg_menu;
}

menu .background 
{
	background-color: @bg_menu;
	color: @fg_menu;
}

/* __fallbackstyle */
menu .gtkstyle-fallback
{
	background-color: @bg_menu;
	color: @fg_menu;
}

menu .gtkstyle-fallback:selected
{
	background-color: @sel_menu;
	color: @fg_menu;
}

/* __alldisabled */
menu *:disabled 
{
	/* text shadow for disabled items */
	/* text-shadow: 1px 1px 0px white ; */
	/* dim disabled icons. */
	  -gtk-icon-effect: dim;
	/* exactly like in cde:*/
	color: @bs_menu;
	text-shadow: 1px 1px @ts_menu;
}

/* for focus */
/* I think cde does this orange line instead of dashed black (for default palette) */
/* __all */
menu * 
{
	outline-color: @bg_hi;
	outline-color: @bg_hi;
	outline-style: solid;
	outline-offset: 2px;
	outline-width: 1px;
	/* depreciated but how to set it then? */
	/* -GtkProgressBar-min-horizontal-bar-height: 15; */
	/* -GtkProgressBar-min-vertical-bar-width: 15; */
}

/* __outline */
menu button,
menu tab
{
	outline-offset: 2px;
}

/* __menubar */
menu menubar
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	/* some extra space on the left of the menubar */
	padding-left: 8px;
}

/* add some extra space to menuitem in the menubar, so the popped up menu will appear glued */
/* to the inset menuitem like in cde. The menuitem and menuitem:hover need to have the same */
/* geometry for the menutiem not to 'move' when going from normal to inset state */
menu menubar > menuitem
{
	/* margin: 5px 5px 0px 5px; */
	margin: 2px 2px 0px 2px;
	padding-bottom: 4px;
}

menu menubar > menuitem:hover
{
	/* margin: 5px 5px 0px 5px; */
	margin: 2px 2px 0px 2px;
	padding-bottom: 4px;
}

/* both items in menubar and menus */
menu menuitem
{
	/* these 'invisible' borders need to be here to prevent the menus from 'moving' when they */
	/* change into hovered inset state */
	border-top-color: @bg_menu;
	border-left-color: @bg_menu;
	border-right-color: @bg_menu;
	border-bottom-color: @bg_menu;
	background-color: @bg_menu;
	border-style: solid;
	padding: 2px;
	color: @fg_menu;
	border-width: 1px;
}

menu menuitem:hover
{
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	padding: 2px;
	border-width: 1px;
}

/* the entire popup menu, border around it */
/* __menus */
menu menu
{
	/* in cde the hovered menuitem has some padding around it (ie empty space in the menu bar) */
	/* and the menu sits directly below that, with no space. But here the menu pops up at the */
	/* bottom of the menubar. So we need vertical offset. But that doesnt seem to work. */
	/* So for now, add extra bottom padding to the menuitem in the menubar, so the hovered menu reaches */
	/* all the way down to the bottom of the menubar */
	/* vertical-offset: -2px; */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bs_menu;
	border-style: solid;
	border-width: 1px;
	padding: 1px;
}

/* __toolbar */
menu toolbar
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 3px;
}

menu toolbar button
{
	margin: 0px 0px 0px 5px;
	padding: 4px;
}

/* __statusbar */
menu statusbar 
{
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-width: 1px;
	border-style: solid;
}

/* __buttons */
menu button
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	/* padding: 2px 5px 2px 5px; */
	padding: 3px 5px 3px 5px;
}

menu button:active,
menu button:checked
{
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 3px 3px 3px 3px;
}

/* its not drawing in 3.16 */
/* __checkbuttons */
menu check
{
	min-width: 11px;
	min-height: 11px;
	background-image: url("../img2/colorset6/checkButton.png");
	background-size: 11px 11px;
	background-repeat: no-repeat;
	background-position: center;
	-gtk-icon-source: url("null.jpg");
}

/* __checkbuttonchecked */
menu check:checked
{
	min-width: 11px;
	min-height: 11px;
	background-image: url("../img2/colorset6/checkButtonPressed.png");
	background-size: 11px 11px;
	background-repeat: no-repeat;
	background-position: center;
	-gtk-icon-source: url("null.jpg");
}

/* __checkbuttoninmenu */
menu menuitem check
{
	min-width: 11px;
	min-height: 11px;
	background-image: url("../img2/colorset6/checkButton.png");
	background-size: 11px 11px;
	background-repeat: no-repeat;
	background-position: center;
	-gtk-icon-source: url("null.jpg");
}

/* __checkbuttoninmenuchecked */
menu menuitem check:checked
{
	min-width: 11px;
	min-height: 11px;
	background-image: url("../img2/colorset6/checkButtonPressed.png");
	background-size: 11px 11px;
	background-repeat: no-repeat;
	background-position: center;
	-gtk-icon-source: url("null.jpg");
}

/* radius + width -> circle */
/* __radiobuttons */
menu radio 
{
	min-width: 14px;
	min-height: 14px;
	background-image: url("../img2/colorset6/radioButton.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
}

/* __radiobuttonchecked */
menu radio:checked
{
	min-width: 14px;
	min-height: 14px;
	background-image: url("../img2/colorset6/radioButtonPressed.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
	/* default displays a black dot here when selected. In CDE we then only see a background */
	/* (bg_color_1) of the 'active window title' color. So set icon to empty */
	-gtk-icon-source: url("null.jpg");
}

/* __radiobuttoninmenu */
menu menuitem radio 
{
	min-width: 14px;
	min-height: 14px;
	background-image: url("../img2/colorset6/radioButton.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
}

/* __radiobuttoninmenuchecked  */
menu menuitem radio:checked
{
	min-width: 14px;
	min-height: 14px;
	background-image: url("../img2/colorset6/radioButtonPressed.png");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: center;
	-gtk-icon-source: url("null.jpg");
}

/* what is this??? */
/* padding gives edge around around gtk3-demo well there it is */
/* and also around xfce terminal. BUT the actual borders (top right etc) */
/* oh wait in the terminal it is drawn, but in gucharmap it is not drawn */
/* other borderstyles are also not drawn (groove/inset) */
/* but cde terminal has such a border, so keep, adding some of the old day clunkyness */

/* __stack */
menu stack 
{
	/* outset (not drawn for mysterious reason) */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	border-width: 1px;
	padding: 6px;
}

/* __notebook totally different in 3.16 and 3.20 */
menu notebook,
menu notebook header 
{
	background: @bg_menu; 
}

menu notebook header tab > label,
menu notebook label 
{
	padding: 0px 0px; 
}

/* header on top */
menu notebook header.right tab:not(:checked) 
{
	margin: 0px 2px 0px -1px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-top-color: @sel_menu;
	border-left-color: @bs_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
}

menu notebook header.right tab:first-child:not(:checked) 
{
	/* margin: 0px 2px -1px -1px; */
	margin: 0px 2px 0px -1px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @bs_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
}

/* Want: 1 solid line between the unchecked tabs, NO DOUBLE line in case the checked tab */
/* is next to an unchecked tab. So we have to use negative top margin for checked tab to */
/* cover the line of the unchecked tab above it. BUT then the checked tab is different in */
/* length from the first-child checked tab and the entire widget MOVES when switchinb */
/* between first child and 2nd child. But we can not set first child top margin to -1 */
/* becaus then it sticks out 1px form the top of the entire widget. So for first child */
/* set top margin to 0 and set BOTTOM margin to -1px. Then the sum is equal for all states */
menu notebook header.right tab:checked 
{
	margin: -1px 0px 0px -1px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @bg_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
}

menu notebook header.right tab:first-child:checked 
{
	margin: 0px 0px -1px -1px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @bg_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
}

menu notebook header.left tab:not(:checked) 
{
	margin: 0px -1px 0px 2px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-top-color: @sel_menu;
	border-left-color: @ts_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @bs_menu;
}

menu notebook header.left tab:first-child:not(:checked) 
{
	/* margin: 0px 2px -1px -1px; */
	margin: 0px -1px 0px 2px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @bs_menu;
}

/* Want: 1 solid line between the unchecked tabs, NO DOUBLE line in case the checked tab */
/* is next to an unchecked tab. So we have to use negative top margin for checked tab to */
/* cover the line of the unchecked tab above it. BUT then the checked tab is different in */
/* length from the first-child checked tab and the entire widget MOVES when switchinb */
/* between first child and 2nd child. But we can not set first child top margin to -1 */
/* becaus then it sticks out 1px form the top of the entire widget. So for first child */
/* set top margin to 0 and set BOTTOM margin to -1px. Then the sum is equal for all states */
menu notebook header.left tab:checked 
{
	margin: -1px -1px 0px 0px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bg_menu;
	border-bottom-color: @bs_menu;
}

menu notebook header.left tab:first-child:checked 
{
	margin: 0px -1px -1px 0px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bg_menu;
	border-bottom-color: @bs_menu;
}

menu notebook header.bottom tab:not(:checked) 
{
	margin: -1px 0px 2px 0px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @bs_menu;
	border-bottom-color: @bs_menu;
	border-left-color: @sel_menu;
}

menu notebook header.bottom tab:first-child:not(:checked) 
{
	/* margin: 0px 2px -1px -1px; */
	margin: -1px 0px 2px 0px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @bs_menu;
	border-bottom-color: @bs_menu;
	border-left-color: @ts_menu;
}

menu notebook header.bottom tab:checked 
{
	margin: -1px 0px 0px -1px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @bg_menu;
	border-bottom-color: @bs_menu;
	border-left-color: @ts_menu;
}

menu notebook header.bottom tab:first-child:checked 
{
	margin: -1px -1px 0px 0px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @bg_menu;
	border-bottom-color: @bs_menu;
	border-left-color: @ts_menu;
}

menu notebook header.top tab:not(:checked) 
{
	margin: 2px 0px -1px 0px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @ts_menu;
	border-bottom-color: @ts_menu;
	border-left-color: @sel_menu;
}

menu notebook header.top tab:first-child:not(:checked) 
{
	/* margin: 0px 2px -1px -1px; */
	margin: 2px 0px -1px 0px;
	background-color: @sel_menu;
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @ts_menu;
	border-bottom-color: @ts_menu;
	border-left-color: @ts_menu;
}

menu notebook header.top tab:checked 
{
	margin: 0px 0px -1px -1px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @ts_menu;
	border-bottom-color: @bg_menu;
	border-left-color: @ts_menu;
}

menu notebook header.top tab:first-child:checked 
{
	margin: 0px -1px -1px 0px;
	/* margin: 0 0 -1px -1px; */
	box-shadow: inset -3px 0 @theme_selected_bg_color;
	/* border-left: 1px solid @bg_menu; */
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-right-color: @bs_menu;
	border-top-color: @ts_menu;
	border-bottom-color: @bg_menu;
	border-left-color: @ts_menu;
}

menu   notebook > stack:not(:only-child) 
{
	background-color: @bg_menu; 
	border-style: solid;
	border-width: 1px;
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
}

/* arrows for going left/right if there are more tabs than fit in the header */
menu notebook > header.top > tabs > arrow.up
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	min-width: 20px;
	min-height: 20px;
	background-image: url("../img2/colorset6/smallArrowRight.png");
	background-size: 12px 13px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
}

menu notebook > header.top > tabs > arrow.down
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	min-width: 20px;
	min-height: 20px;
	background-image: url("../img2/colorset6/smallArrowLeft.png");
	background-size: 12px 13px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
	/* the selected tab has margin -1 to hide bla bla see above. But this makes it */
	/* sit to close to the arrowbutton in the headerbar. So give that a margin of 1 */
	margin: 0px 1px 0px 0px;
}
  

/* buttons on a non active tab appear flat eg in xfce terminal */
menu tab,
menu tab button
{
	/* inset */
	border-top-color: @sel_menu;
	border-left-color: @sel_menu;
	border-right-color: @sel_menu;
	border-bottom-color: @sel_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 3px;
}

menu tab:checked,
menu tab:checked button
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
}

/* something like a setup wizard widget */
/* __assistant */
menu assistant .sidebar 
{
  background-color: @bg_menu;
color: @fg_menu;
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	border-style: solid;
	border-width: 1px;
}

menu assistant .sidebar label 
{
  padding: 6px 12px;
}

menu assistant .sidebar label.highlight 
{
  background-color: @sel_menu;
}

/* files in filedialog actual treeview */
/* on a per line basis */
/* __treeview */
menu treeview.view
{
	background-color: @bg_menu;
	color: @fg_menu;
}

/* the 'time' 'size' 'name' buttons above that */
/* __treeviewbutton */
menu treeview.view button 
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 2px;
	padding: 2px 4px 2px 4px;
}

/* for borders this has effect on the calendar thing and ONE other view. the other ones stay flat */
/* funnyly for the background color it DOES take effect */
/* aha apparently the calandar is a single text entry thing or somehting. */
/* if this border is drawn eg each line of text in the file browser window gets a separate borderr. */
/* so no drawe border here */
menu *.view
{
	/* inset */
	/* border-top-color: @bs_menu; */
	/* border-left-color: @bs_menu; */
	/* border-right-color: @ts_menu; */
	/* border-bottom-color: @ts_menu; */
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 0px;
}

/* so do for calendar separately. text col is wrong why?todo */
/* is set below using blabla text see _text */
/* text color:*/
/* __calendar */
menu calendar,
/* border around the entire thing:*/
menu calendar.view
{
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
}

/* special color for icon (file browsers and such) */
/* =darker normal color instead of the blue (for default Broica.dp palette) */
/* __iconview */
menu iconview.view
{
	/* inset */
	/* border-top-color: @bs_menu; */
	/* border-left-color: @bs_menu; */
	/* border-right-color: @ts_menu; */
	/* border-bottom-color: @ts_menu; */
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: none;
}

menu iconview.view:selected,
menu iconview.view:selected:focus,
menu iconview.view:active
{
	background-color: shade(@sel_menu, 0.90);
}

/* lists and such */
/* but PER CELL so how draw inset around ENTIRE view? */
/* __view */
menu view 
{
	color: @fg_menu;
	background-color: @bg_menu;
}

menu view:selected
{
	color: @fg_menu;
	background-color: @sel_menu;
}

/* __sidebar */
menu .sidebar,
menu .sidebar view,
menu .sidebar > view,
menu .sidebar scrolledwindow 
{
	color: @fg_menu;
	background-color: @bg_menu;
	/* color: mix(@theme_fg_color, @theme_bg_color, 0.1); */
}

menu sidebar 
{
	color: @fg_menu;
	background-color: @sel_menu;
}

/* none of these seems to do anything */
menu sidebar:selected,
menu sidebar:active,
menu sidebar row:selected, 
menu sidebar row:selected label
{
	color: @fg_menu;
	background-color: @bs_menu;
}

/* combobox without entry ('option menu') css:*/
/* combobox */
/* ├── box.linked */
/* │   ╰── button.combo */
/* │       ╰── box */
/* │           ├── cellview */
/* │           ╰── arrow */
/* ╰── window.popup */
/* combobox with entry css:*/
/* combobox */
/* ├── box.linked */
/* │   ├── entry.combo */
/* │   ╰── button.combo */
/* │       ╰── box */
/* │           ╰── arrow */
/* ╰── window.popup */
/* in cde there are widgets combobox and optionmenu (like in pre-gtk3) The first */
/* have a list inside them and are bg_color_5, the second have a menu and are */
/* bg_color_6. Gtk3 has only one kind of combobox but there are 2 ways of */
/* displaying it: default as menu, and 'as-list'. Also there are 2 ways the */
/* widget looks: with or without entry. Without entry I make into a 'optionmenu', */
/* with entry I make into a list To differentiate we select the cases in which */
/* button is first child: Unfortunately it is not possible (afaik) to select the */
/* combobox vs combobox with entry themselves, so I cant make one popup a menu and */
/* the other a list.. damn. I can only select the button and change that. (it used */
/* to be possible pre gtk 3.20 and gtk2, but not anymore */
/* SO LET BOTH DISPLAY A LIST:*/
/* __combox */
menu combobox
{
	/* with this, both comboboxes: (combobox and comboboxentry) appear either */
	/* as menu or as list. But we want one to appear as menu and the other as list */
	-GtkComboBox-appears-as-list: 1;
}

/* these ones appear green, like optionmenu in cde */
/* __comboboxoptionmenu */
menu combobox button:first-child
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	/* MY COMBOBOX BUTTON ARROW (BELOW) HAS HEIGHT 6. SO TO CENTER IT VERTICALLY */
	/* WITHOUT HALF PIXEL DRAWING (BLURRYNESS), THE ENCLOSING BOX HAS TO HAVE AN */
	/* EVEN NUMBER OF PIXELS: (AND NOW DONT PICK A DIFFERENT FONT OR DPI) */
	min-height: 24px;
}

/* __comboboxbuttonarrowbeam */
menu combobox button:first-child arrow
{
	min-width: 15px;
	min-height: 6px;
	background-image: url("../img2/colorset6/comboBoxBeam.png");
	background-size: 15px 6px;
	background-repeat: no-repeat;
	background-position: center;
}

/* the one with entry:*/
/* __comboboxbutton */
menu combobox button
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	min-height: 23px;
	/* this makes the arrow NOT center horizontally */
	/* min-width: 23px; */
}

/* __comboxbuttonarrow  */
menu combobox button arrow
{
	min-width: 17px;
	min-height: 19px;
	background-image: url("../img2/colorset6/arrowBeamDown.png");
	background-size: 17px 19px;
	background-repeat: no-repeat;
	background-position: center;
}

/* list of widgets, not list of text items if that makes sense */
/* __list */
menu list
{
	background-color: @bg_menu;
	color: @fg_menu;
}

menu list-row:selected
{
	background-color: @sel_menu;
	color: @fg_menu;
}

/* spinbutton.horizontal */
/* ├── undershoot.left */
/* ├── undershoot.right */
/* ├── entry */
/* │   ╰── ... */
/* ├── button.down */
/* ╰── button.up */
/* spinbutton.vertical */
/* ├── undershoot.left */
/* ├── undershoot.right */
/* ├── button.up */
/* ├── entry */
/* │   ╰── ... */
/* ╰── button.down */
/* combobox entry, text line thing, spinner number field, search box etc */
/* all single line I think, so we can put a border inset around */
/* todo only for spinbutton text has wrong color... */
/* text appeared black first. why need to do this separately ('entry' text fg was already white)? */
/* __spinbutton */
menu spinbutton
{
	color: @fg_menu;
	background-color: @bg_menu;
}

/* tekst +- tekent eroverheen */
menu spinbutton.horizontal button.up,
menu spinbutton.vertical button.up
{
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/* FOR THE IMAGE TO DISPLAY SHARP CENTERED, WE MUST HAVE A CONTAINER WITH THE SAME */
	/* PARITY AS THE IMAGE (IE BOTH EVEN OR BOTH ODD). UNFORTUNATELY WE DONT CONTROL THIS */
	/* ENTIRELY, AND IT CAN CHANGE WHEN FONT/DPI SETTINGS CHANGE... SO .. HMM. WHAT TO DO */
	/* I JUST PICK VALUES THAT WORK AND IF IT DOESNT WORK ON A DIFFERENT SETUP, THE USER */
	/* HAS TO TWEAK THE DPI SETTINGS */
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	min-width: 19px;
	min-height: 19px;
	background-size: 15px 15px;
	background-image: url("../img2/colorset6/arrowUp.png");
	background-repeat: no-repeat;
	background-position: center;
	/* this dont do nothn. Button has no icon */
	/* -gtk-icon-source: url("../img2/colorset6/arrowUp.png"); */
	/* there is a +- 9ere dont want. So put color to transparent (bg color will */
	/* still draw on top) */
	/* color: @bg_menu; */
	color: transparent;
}

menu spinbutton.horizontal button.up:active,
menu spinbutton.vertical button.up:active
{
	min-width: 19px;
	min-height: 19px;
	/* this was the small arrow from the original spinbutton in gtk2 */
	/* background-image: url("../img2/colorset6/spinButtonUp.png"); */
	background-image: url("../img2/colorset6/arrowUpPressed.png");
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
}

menu spinbutton.horizontal button.down,
menu spinbutton.vertical button.down
{
	min-width: 19px;
	min-height: 19px;
	background-image: url("../img2/colorset6/arrowDown.png");
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
}

menu spinbutton.horizontal button.down:active,
menu spinbutton.vertical button.down:active
{
	min-width: 19px;
	min-height: 19px;
	background-image: url("../img2/colorset6/arrowDownPressed.png");
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
}

/* __entry */
menu entry 
{
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
}

/* selected text entry.selected.focus.selection:focussed:selection selected focussed::.selectified.focus.fuckus */
/* this is doing nothing wtf... */
menu entry selection,
menu entry .selection,
menu entry.selection,
menu entry selected,
menu entry:selected,
menu entry:selected:focus
{
	background-color: @sel_menu;
}

/* the 'placeholder'text (filled in automatically) appears dark grey. Not white. WHY */
menu entry > *
{
	color: @fg_menu;
}

/* these stacked windows of items like in synaptic */
/* __expander */
menu expander arrow
{
	min-width: 16px;
	min-height: 16px;
	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

menu expander arrow:dir(rtl)
{
	-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
}

menu expander arrow:checked
{
	-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

/* Firefox adress bar */
menu label.separator
{
  color: @bs_menu;
}

/*_text */
/* __textcolors */
menu .view text:selected:focus,
menu iconview text:selected:focus,
menu textview text:selected:focus,
menu .view text:selected,
menu iconview text:selected,
menu textview text:selected, 
menu .view text selection:focus, 
menu iconview text selection:focus, 
menu .view text selection, 
menu iconview text selection,
menu textview text selection:focus,
menu textview text selection, 
menu flowbox flowboxchild:selected, 
menu spinbutton:not(.vertical) selection:focus, 
menu spinbutton:not(.vertical) selection,
menu .view:selected:focus,
menu iconview:selected:focus,
menu .view:selected,
menu iconview:selected,
menu entry selection:focus,
menu entry selection,
menu modelbutton.flat:selected,
menu popover.background checkbutton:selected,
menu popover.background radiobutton:selected,
menu .menuitem.button.flat:selected,
menu treeview.view:selected:focus,
menu treeview.view:selected,
menu row:selected,
menu calendar:selected,
semicolondummy
{
	/* its inverted like in the style of olld crt green monitors. But this must only for text to be */
	background-color: @fg_menu;
	color: @bg_menu;
}

/* disabled must be _text color but etched with shadow */
menu .view text:disabled,
menu iconview text:disabled,
menu textview text:disabled,
menu .view text:disabled,
menu iconview text:disabled,
menu textview text:disabled, 
menu .view text:disabled, 
menu iconview text:disabled, 
menu .view text:disabled, 
menu iconview text:disabled,
menu textview text:disabled,
menu textview text:disabled,
menu flowbox flowboxchild:disabled, 
menu spinbutton:not(.vertical):disabled, 
menu spinbutton:not(.vertical):disabled,
menu .view:disabled,
menu iconview:disabled,
menu .view:disabled,
menu iconview:disabled,
menu entry:disabled,
menu entry:disabled,
menu modelbutton.flat:disabled,
menu popover.background checkbutton:disabled,
menu popover.background radiobutton:disabled,
menu .menuitem.button.flat:disabled,
menu treeview.view:disabled,
menu treeview.view:disabled,
menu row:disabled,
menu calendar:disabled,
semicolondummy
{
	/* etched in: text with dark fg and light bg */
	color: @bs_menu;
	text-shadow: 1px 1px @ts_menu;
}

/* was zum foik ees dees */
/* in file dialog the lines of wheres the files are */
/* __cell */
menu .cell
{
	border-width: 0;
	border-radius: 0;
	background-color: @bg_menu;
	color: @fg_menu;
	/* this needs to be here for the lines not to overlap:*/
	padding: 0px;
}

menu .cell:selected,
menu .cell:selected:focus
{
	background-color: @sel_menu;
	color: @fg_menu;
}

/* this row is not inside text thingies but .. yes where? normal bg */
/* in file dialog he side pane onthe left with 'places' */
/* __row */
menu row { 
	padding: 4px;
}

menu row:selected,
menu row:selected:hover,
menu row:selected:focus 
{
	border-style: none;
	border-color: @bs_menu;
	background-color: @sel_menu;
	color: @fg_menu;
}

/* both h and v */
/* __scrollbar */
menu scrollbar slider 
{
	/* this seems to determine the width of the scrollbar */
	/* experimentally verified. I hope the laws of nature dont change the next release of gtk */
	/* this is width WITHOUT border The cde button image is width 11. slider must */
	/* be same size so inside width of slider must be 9 */
	min-width: 9px;
	min-height: 9px;
	border-top: 1px solid @ts_menu;
	border-left: 1px solid @ts_menu;
	border-right: 1px solid @bs_menu;
	border-bottom: 1px solid @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
}

/* __scrollbartrough */
menu scrollbar.vertical trough 
{
	/* width of the inside=width of cde button image */
	min-width: 11px;
	min-height: 11px;
	/* inset */
	border-top: 0px solid @bs_menu;
	border-bottom: 0px solid @bs_menu;
	border-left: 1px solid @bs_menu;
	border-right: 1px solid @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
}

/* __scrollbarvbuttonup */
menu scrollbar.vertical button.up 
{
	border-left: 1px solid @bs_menu;
	border-top: 1px solid @bs_menu;
	border-right: 1px solid @ts_menu;
	border-bottom: 0px solid @sel_menu;
	margin: 0px 0px 0px 0px;
	/* the one line format doesnt work?? */
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	min-height: 11px;
	min-width: 11px;
	-gtk-icon-source: url("../img/arrowup.png");
	/* does this actually work : NO */
	/* -gtk-icon-source: -gtk-recolor(url('../img/arrowup.png'), success blue, error rgb(255,0,0)); */
	/* -gtk-icon-source: -gtk-recolor(url('../img/arrowup.png')); */
}

/* __scrollbarvbuttonupactive */
menu .scrollbar.vertical .button.up:active
{
	-gtk-icon-source: url("../img/arrowuppressed.png");
}

/* __scrollbarvbuttondown */
menu scrollbar.vertical button.down 
{
	border-left: 1px solid @bs_menu;
	border-right: 1px solid @ts_menu;
	border-top: 0px solid @bs_menu;
	border-bottom: 1px solid @ts_menu;
	margin: 0px 0px 0px 0px;
	/* the one line format doesnt work?? */
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	min-height: 11px;
	min-width: 11px;
	-gtk-icon-source: url("../img/arrowdown.png");
}

/* __scrollbarvbuttondownactive */
menu scrollbar.vertical button.down:active
{
	-gtk-icon-source: url("../img/arrowdownpressed.png");
}

/* __scrollbarhtrough */
menu scrollbar.horizontal trough 
{
	/* width of the inside=width of cde button image */
	min-width: 11px;
	min-height: 11px;
	/* inset */
	border-top: 1px solid @bs_menu;
	border-bottom: 1px solid @ts_menu;
	border-left: 0px solid @bs_menu;
	border-right: 0px solid @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
}

/* __scrollbarhbuttondown */
menu scrollbar.horizontal button.down
{
	border-left: 0px solid @ts_menu;
	border-top: 1px solid @bs_menu;
	border-right: 1px solid @ts_menu;
	border-bottom: 1px solid @ts_menu;
	margin: 0px 0px 0px 0px;
	/* the one line format doesnt work?? */
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	min-height: 11px;
	min-width: 11px;
	-gtk-icon-source: url("../img/arrowright.png");
}

/* __scrollbarhbuttondownactive */
menu scrollbar.horizontal button.down:active
{
	-gtk-icon-source: url("../img/arrowrightpressed.png");
}

/* __scrollbarhbuttonup */
menu scrollbar.horizontal button.up
{
	border-left: 1px solid @bs_menu;
	border-top: 1px solid @bs_menu;
	border-right: 0px solid @ts_menu;
	border-bottom: 1px solid @ts_menu;
	margin: 0px 0px 0px 0px;
	/* the one line format doesnt work?? */
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	min-height: 11px;
	min-width: 11px;
	-gtk-icon-source: url("../img/arrowleft.png");
}

/* __scrollbarhbuttonupactive */
menu scrollbar.horizontal button.up:active
{
	-gtk-icon-source: url("../img/arrowleftpressed.png");
}

/* for firefox? vrom macos theme */
menu XXscrollbar button
{
	background-color: @bg_menu;
	background-color: @sel_menu;
}

/* the movable things like scrollbar without scroll area */
/* this is the thing where the slider sits in */
/* __scaletrough */
menu scale trough 
{
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	min-width: 13px;
	min-height: 13px;
}

menu scale.horizontal trough
{
	/* prevent slider from sliding across the edge */
	padding-left: 15px;
	padding-right: 15px;
}

menu scale.vertical trough
{
	/* prevent slider from sliding across the edge */
	padding-top: 15px;
	padding-bottom: 15px;
}

/* __scaleslider */
menu scale slider 
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
}

/* set the sliders to elongated rectangle ,similar to cde (default is square) */
/* slider determines the width of the scale (height for horizontal) */
/* NOTE transparent png here seems to be rendered differently from scrollbar button:*/
/* opacity is 48 there. Here the shadow color is renderend lighter */
/* so make less transparent */
/* __scalehslider */
menu scale.horizontal slider
{
	min-width: 28px;
	min-height: 11px;
	background-image: url("../img/sliderseparatorvertical.png");
	background-repeat: no-repeat;
	background-position: center;
	/* aha, here overlay DOES work, unlike in scrollbar. So use normal */
	/* that seems to be closest to the shadow/hilight colors calculated in cde/motif */
	/* background-blend-mode: overlay; */
}

/* __scalevslider */
menu scale.vertical slider
{
	min-height: 28px;
	/* INTERNAL width. With border around that of 1 px, for the total */
	/* width to be 13 (fit in trough) this as to be 11:*/
	min-width: 11px;
	background-image: url("../img/sliderseparatorhorizontal.png");
	background-repeat: no-repeat;
	background-position: center;
	/* background-blend-mode: overlay; */
	/* -gtk-icon-source: url("../img/sliderseparatorvertical.png"); */
}

/* __scalemark */
menu scale.mark
{
	background-color: @bs_menu;
	color: @bs_menu;
	min-height: 4px;
	min-width: 1px;
}

menu scale.horizontal mark 
{
	background-color: @bs_menu;
	min-height: 4px;
	min-width: 1px;
}

/* __scalevmark */
menu scale.vertical mark 
{
	background-color: @bs_menu;
	min-height: 1px;
	min-width: 4px;
}

/* __tooltip */
menu tooltip 
{
	background-color: @sel_menu;
	border-color: @bg_hi;
	border-style: solid;
	border-width: 2px; 
}

/* what is this supposed to be. Fake window title?? I have a window manager */
/* this sucks */
/* __headerbar */
headerbar
{
        border-top-color: @ts_gen;
        border-left-color: @ts_gen;
        border-right-color: @bs_gen;
        border-bottom-color: @bs_gen;
        background-color: @bg_gen;
        color: @fg_gen;
        border-style: solid;
        border-width: 1px;
        padding: 0px;
        min-height: 0px;
}

 .header-bar *,
headerbar button
{
        border-width: 0px;
        background-color: @bg_gen;
        color: @fg_gen;
        margin-top: 0px; /* same as headerbar side padding for nicer proportions */
        margin-bottom: 0px;
}

/* some of the bg_gen show through so */
headerbar *,
headerbar *:active,
headerbar *:checked,
headerbar *:hover
{
        background-color: @bg_gen;
        color: @fg_gen;
}

/* __menuitemarrow */
menu menuitem arrow,
.menu menuitem arrow,
menu .context-menu .menuitem arrow 
{ 
	 min-height: 16px;
	 min-width: 16px;
}

/* now set the appropriate icons */
/* __menuitemarrowright */
menu menu menuitem arrow:dir(ltr),
menu .menu menuitem arrow:dir(ltr),
menu .context-menu menuitem arrow:dir(ltr) 
{
	/* the iconsource way of displaying makes the image look fuzzy */
	/*-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); */
	/*-gtk-icon-source: url("../img/menuarrowright.png"); */
	margin-left: 10px; 
	/* hm here it works as it should, no blurring / smudging */
	min-width: 15px;
	min-height: 15px;
	background-image: url("../img2/colorset6/arrowRight.png");
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
}

/* __menuitemarrowleft */
menu menu menuitem:hover arrow:dir(ltr),
menu .menu menuitem:hover arrow:dir(ltr),
menu .context-menu menuitem:hover arrow:dir(ltr)
{
	 margin-left: 10px; 
	/* hm here it works as it should, no blurring / smudging */
	min-width: 15px;
	min-height: 15px;
	background-image: url("../img2/colorset6/arrowRightPressed.png");
	background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center;
}

/* small progressbar in entry behind text?? */
/* did pop up in totally random places (ie button and scrollbarbutton of oppup message) */
/* __entryprogress */
menu entry progress
{
	border-width: 1px;
	border-color: #ffffff;
	box-shadow: none;
	background-color: @bg_menu;
	color: @fg_menu;
}

/* special case inside text area. but how to do this generally? cant enter every special case */
/* __treeviewcheck */
menu treeview.view check
{
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	background-color: @sel_menu;
}

/* little progressbar in tranmission ie a prog bar inside a text line */
/* __treeviewprogressbar */
menu treeview.view.progressbar
{
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	border-style: solid;
	border-width: 1px;
	background-color: @sel_menu;
	color: @fg_menu;
}

/* Note that there are 2 nested borders: progresbar border with trough border inside */
/* so dont draw border around entire progressbar, only around trough */
/* progress percentage will then appear 'outside' */
/* __progressbar */
menu progressbar
{
	border-style: none;
	border-width: 1px;
	background-color: @bg_menu;
	color: @fg_menu;
}

/* the part where the sliding thing is sliding in */
/* __progressbartrough */
menu progressbar trough 
{
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	border-style: solid;
	border-width: 1px;
	background-color: @bg_menu;
	/* this is the INTERNAL width. Border is drawn around */
}

/* sometimes the vertical bar displayed as a little square.. so set minimal width/height */
menu progressbar.horizontal trough
{
	min-width: 40px;
	min-height: 13px;
}

menu progressbar.vertical trough
{
	min-width: 13px;
	min-height: 40px;
}

/* this is the thing that grows as progress increases, inside the trough. */
/* In cde this is a simple color field with color sel_color_5 */
/* __progressbarprogress */
menu progressbar progress
{
	border-style: none;
	border-width: 10px;
	background-color: @sel_menu;
	min-width: 13px;
	min-height: 13px;
}

/* __separatorvertical */
menu separator.vertical 
{
        margin: 0px;
        padding: 0px;
        border-left: 1px solid @bs_menu;
        border-right: 1px solid @ts_menu;
}

/* __separatorhorizontal */
menu separator.horizontal 
{
        margin: 0px;
        padding: 0px;
        border-top: 1px solid @bs_menu;
        border-bottom: 1px solid @ts_menu;
}

/* HOOOO THIS ACTUALLY WORKS HAHAHAHA */
/* movable separator between widgets eg like between the gimp tools. */
/* In cde, this is a separator line and a little button on top of that */
/* (horizontal: on the right, vertical: on the bottom) */
/* To make this, eg in horizontal case, I have a transparent image of */
/* 16x12 with the double horizontal line (bottomshadow/topshadow)  in */
/* the center. The transparent pixels are for padding. This way the */
/* button image can be put on top, without the horizontal line scaling */
/* to the entire width of the button. The button also has transparent */
/* pixels on the right for padding (and left also if we change our mind later). */
/* The background pos. can then be set to 'right'. */
/* Note that the min-height of the separator has to be a bit smaller than */
/* the background image height, otherwise we see some repeating in the */
/* vertical direction too, whereas for the horizontal separtor we only want */
/* repeating in the x direction. */
/* Also the parity of the button and separator minheight must be the same */
/* for centering to work properly (and not be drawn on half pixel and be drawn fuzzy) */
/* Vertical separator similarly */
/* __panedseparators */
/* this separator is HORIZONTAL */
menu paned.vertical > separator
{
	background-image: url("../img2/colorset6/handleButtonHorizontal.png"),	url("../img2/colorset6/handleSeparatorHorizontal.png");
	background-repeat: no-repeat, 						repeat;
	background-size: 24px 8px, 						16px,12px;
	background-position: right,							center;
	min-height: 10px;
}

/* this separator is VERTICAL */
menu paned.horizontal > separator
{
	background-image: url("../img2/colorset6/handleButtonVertical.png"),	url("../img2/colorset6/handleSeparatorVertical.png");
	background-repeat: no-repeat, 						repeat;
	background-size: 8px 24px, 						12px,16px;
	background-position: bottom,							center;
	min-width: 10px;
}

/* __frameborder */
menu frame > border
{
	border-width: 1px;
	border-style: solid;
	border-color: @bs_menu;
	border-right-color: @bs_menu;
	border-width: 4px;
	border-image: url("../img2/colorset6/frameStandAlone.png") 4 4 4 4;
}

/* __frameflatborder */
menu frame.flat > border,
menu frame > border.flat,
menu statusbar frame > border
{
	border: none;
}

/* was zum fook is this? */
/* make id red for now so maybe find out some nice day */
/* __scrolledwindow */
menu scrolledwindow frame
{
	border-width: 1px;
	border-style: solid;
	border-color: shade(@bg_menu,0.80);
	/* border-color: #ff0000; */
}

/* avoid double borders when a viewport is */
/* packed into a scrolledwindow */
/* __scrolledwindowviewportframe */
scrolledwindow viewport frame
{
	border-style: none;
}

/* THIS IS IT THE FRECKING FRAME AROUND LISTS AND SUCH! */
/* needs margin !! */
/* see also .view */
menu scrolledwindow
{
	border-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	border-width: 1px;
	margin: 1px;
}

/* what is this */
/* __viewport */
menu viewport 
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
}

/* kind of clock like wait animation */
/* __spinner */
menu spinner 
{
	color: @fg_menu;
}

menu spinner:checked 
{
	color: @fg_menu;
}

/* kind of a ... bar. See gtk3-demo */
/* __infobar */
menu infobar 
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
}

/* like in synaptic the left thing */
/* __stacksidebarviewport */
menu stacksidebar viewport 
{
	border-width: 1px; 
	border-style: solid;
	border-color: @ts_menu;
	background-color: @bg_menu;
}

menu stacksidebar row 
{
	padding: 3px;
	background-color: @bg_menu;
}

menu stacksidebar row:selected 
{
	color: @fg_menu;
	background-color: @sel_menu;
}

menu stacksidebar row:selected label 
{
	color: @fg_menu;
}

/* __assistantsidebar */
menu assistant sidebar label 
{
	padding: 4px 2px 4px 2px;
}

menu assistant sidebar label.highlight 
{
	background-color: @sel_menu; 
	color: @fg_menu;
}

menu assistant sidebar 
{
	border-width: 1px;
	border-style: solid;
	border-color: @bs_menu;
}

/* an on-off switch */
/* .switch */
/* menu GtkSwitch */
/* __switch */
menu switch
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 0px;
}

/* .switch .slider */
/* text not visible */

/* __switchslider */
menu switch slider
{
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 0px;
}

/* __colorchooser */
menu colorswatch:selected
{
	/* inset */
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 3px;
	margin: 0px;
	/* padding: 2px 4px 2px 4px; */
}

menu colorswatch
{
	/* outset */
	border-top-color: @ts_menu;
	border-left-color: @ts_menu;
	border-right-color: @bs_menu;
	border-bottom-color: @bs_menu;
	background-color: @bg_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
	padding: 3px;
	margin: 0px;
	/* padding: 2px 4px 2px 4px; */
}

menu colorchooser
{
	/* now this looks cde-ish */
	/* double inset frame */
	border-style: solid;
	border-width: 4px;
	border-image: url("../img2/colorset6/frameStandAlone.png") 4 4 4 4;
	background-color: @bg_menu;
	color: @fg_menu;
	padding: 8px;
}

/* make look the same as in gtk2 */
menu button.color 
{
	padding: 4px 27px 4px 27px;
}

menu button.color colorswatch
{
	padding: 0px;
	border-top-color: @bs_menu;
	border-left-color: @bs_menu;
	border-right-color: @ts_menu;
	border-bottom-color: @ts_menu;
	background-color: @sel_menu;
	color: @fg_menu;
	border-style: solid;
	border-width: 1px;
}

